<template>
  <header class="header-container">
    <div class="header-content">
      <div class="logo">
        <h1>商城</h1>
      </div>
      <div class="nav-actions">
        <el-badge :value="cartCount" class="cart-badge">
          <el-button @click="openCart" type="primary" plain>
            <i class="fas fa-shopping-cart"></i>
            购物车
          </el-button>
        </el-badge>
        <el-dropdown>
          <el-button type="primary" plain>
            <i class="fas fa-user"></i>
            {{ userStore.userInfo.name }}
            <i class="el-icon-arrow-down"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToUserCenter">个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const props = defineProps({
  cartCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['openCart'])
const router = useRouter()
const userStore = useUserStore()

const openCart = () => {
  emit('openCart')
}

const goToUserCenter = () => {
  router.push('/user')
}

const handleLogout = () => {
  userStore.clearLoginState()
  router.push('/')
}
</script>

<style scoped>
.header-container {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 50px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-actions .el-button {
  padding: 6px 12px;
}

.cart-badge :deep(.el-badge__content) {
  background-color: #ff4444;
}
</style> 